<template>
  <div class="Headbar">
    <div class="main" v-if="myInfo">
      <div class="left fl">
        <div class="logo">
          <img v-if="myInfo.factoryLogo" :src="URL.PIC+myInfo.factoryLogo">
          <img v-else src="@/assets/images/factory/no-logo.jpg">
        </div>
        <div class="info">
          <div class="factory-name">
            {{ myInfo.factoryName }}
            <span v-if="favorite" class="factory-sc" @click="factoryFavoritesCancel()"><i class="icons icons-sc icons-sc-active"></i></span>
            <span v-else class="factory-sc" @click="factoryFavorites()"><i class="icons icons-sc"></i></span>
            <div class="factory-sjg">
              <p>手机逛</p>
              <i class="icons xcx-code"></i>
              <!-- <span class="triangle-bottom"></span> -->
              <img class="qrcode maxs" :src="qrcode">
            </div>
          </div>

          <div class="factory-desc">
            {{ myInfo.factoryAddress }}
          </div>
          <div class="factory-tags">
            <span class="icons icons-factoryType">
              <img v-if="myInfo.factoryType == 'DIRECT'" src="@/assets/images/factory/DIRECT.png">
              <img v-if="myInfo.factoryType == 'FLAGSHIP'" src="@/assets/images/factory/FLAGSHIP.png">
              <img v-if="myInfo.factoryType == 'WHOLESALE'" src="@/assets/images/factory/WHOLESALE.png">
            </span>
            <span :class="'icon-supplierType'">{{myInfo.supplierType | supplierTypes}}</span>
          </div>
        </div>
      </div>
      <div class="right fr">
        <div class="sreach">
          <input type="text" name="" placeholder="请输入商品或品牌名称" v-model="sreachKW">
          <span class="sreach-btn sreach-self" @click="clickSreach(1)">搜全站</span>
        </div>
        <span class="sreach-btn sreach-store" @click="clickSreach(2)">搜本店</span>
      </div>
    </div>
  </div>
</template>

<script>
import { factoryFavorites, factoryFavoritesCancel, factoryFavoritesCount } from '@/api/factory'
export default {
  props: ['info'],
  data() {
    return {
      sreachKW: null,
      myInfo: null,
      userInfo: null,
      favorite: false,
      qrcode: null,
      showQrcode: false,
    }
  },
  watch: {
    info(val) {
      this.myInfo = val
      if(this.userInfo){
        this.factoryFavoritesCount();
      }
      this.factoryXcxCode();
    }
  },
  filters:{
    // 供应商类型
    supplierTypes: function(value){
      if (!value) return ''
      if(value == 'FACTORY'){
        return '云工厂'
      }else if(value == 'DEALER'){
        return '经销商'
      }else if(value == 'RETAILER'){
        return '零售商'
      }
    }
  },
  created() {
    this.myInfo = this.info
  },
  methods: {
    // 云工厂二维码
    factoryXcxCode() {
      // this.qrcode = this.URL.baseURL+'/factory/frontend/factory/wx_app_image/0/'+this.myInfo.id+'.png'
      this.qrcode = this.URL.baseURL+'/factory/frontend/factory/wx_app_image/0/1101731899204730880.png'
    },

    // 是否已收藏
    factoryFavoritesCount() {
      factoryFavoritesCount({favoriteId: this.myInfo.id}).then(res=>{
        this.favorite = res.data.favorite
      })
    },
    // 收藏
    factoryFavorites() {
      factoryFavorites({
        content: {
          logo: this.myInfo.factoryLogo,
          factoryName: this.myInfo.factoryName,
          address: this.myInfo.factoryAddress,
        },
        favoriteId: this.myInfo.id
      }).then(res=>{
        if(res.code == 200){
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.favorite = true
        }
        console.log(res)
      })
    },
    // 取消收藏
    factoryFavoritesCancel() {
      factoryFavoritesCancel({
        favoriteId: this.myInfo.id
      }).then(res=>{
        if(res.code == 200){
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.favorite = false
        }
        console.log(res)
      })
    },
    // 点击搜索
    clickSreach(val) {
      if(!this.sreachKW){
        return false
      }
      if (val === 1) {
        this.routeToPath('/search/product?kw='+this.sreachKW)
      } else {
        this.routeToPath('/product/list?kw='+this.sreachKW+'&factoryId='+this.myInfo.id, 'new')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Headbar{
  background-color: #fff;
  padding: 10px 0;
  // .factory-sc{
  //   background-color: #F73949;
  //   display: inline-block;
  //   font-size: 12px;
  //   color: #fff;
  //   vertical-align: middle;
  //   padding: 4px 8px;
  //   cursor: pointer;
  //   border-radius: 10px;
  //   margin-top: -2px;
  // }

  .icons-sc{
    width: 61px;
    height: 19px;
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 2px;
    background-image: url('../../../assets/images/factory/icons-sc.png');
  }
  .icons-sc-active{
    background-image: url('../../../assets/images/factory/icons-sc-active.png');
  }
  .factory-sjg{
    margin-left: 20px;
    font-size: 12px;
    position: absolute;
    right: -80px;
    top: 0;
    color: #999;
    border-left: 1px solid #ddd;
    padding-left: 10px;
    cursor: pointer;
    &:hover{
      .qrcode{
        display: block;
      }
    }
    .triangle-bottom{
      margin-left: 3px;
    }
    .qrcode{
      position: absolute;
      top: 16px;
      left: 14px;
      z-index: 99;
      width: 160px;
      height: 160px;
      display: none;
      border: 8px solid #eee;
      border-radius: 4px;
    }
    p{
      padding: 0;
      margin: 0;
      padding-bottom: 4px;
    }
  }
  .xcx-code{
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 2px;
    margin-left: 10px;
    background-image: url('../../../assets/images/factory/xcx-code.png');
  }
  .main{
    width: 1200px;
    margin: 0 auto;
    height: 70px;
  }
  .logo{
    float: left;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border: 1px solid #eee;
    overflow: hidden;
    // padding-top: 5px;
  }
  .logo img{
    max-width: 70px;
    vertical-align: middle;
  }
  .info{
    float: left;
    margin-left: 16px;
    .factory-name{
      font-size: 18px;
      color: #333;
      letter-spacing: 1px;
      position: relative;
    }
    .factory-desc{
      font-size: 13px;
      margin-top: 6px;
      color: #888;
      width: 450px;
    }
  }
  .right{
    margin-top: 17px;
  }
  .sreach{
    float: left;
    input{
      width: 220px;
      height: 32px;
      border-radius: 5px 0 0 5px;
      border: 2px solid #3A80E0;
      padding: 0 25px;
      padding-left: 30px;
      font-size: 12px;
      color: #888;
      background: url('../../../assets/images/factory/icon-sreach.png') no-repeat 6px #F2F2F2;
      vertical-align: middle;
      outline:none;
      float: left;
    }


  }
  span.sreach-btn{
    display: inline-block;
    line-height: 36px;
    color: #fff;
    cursor: pointer;
    padding: 0 16px;
  }
  .sreach-self{
    background-color: #3A80E0;
    vertical-align: middle;
  }
  .sreach-store{
    background-color: #7F7F7F;
    margin-left: 3px;
    border-radius: 0 5px 5px 0;
  }
  .factory-tags{
    margin-top: 5px;
    .icons-factoryType, .icons-factoryType img{
      width: 80px;
      height: 22px;
    }
    .icon-supplierType{
      background-color: #F73949;
      color: #fff;
      font-size: 12px;
      border-radius: 10px;
      width: 61px;
      height: 19px;
      display: inline-block;
      text-align: center;
      line-height: 19px;
      margin-left: 20px;
      vertical-align: top;
    }

  }
}
</style>
